<template>
  <div class="comment">
    <div
      v-if="EvaluationRate.allCount"
      class="rate"
    >
      <div class="left">
        <div class="goodRate">
          {{ EvaluationRate.starLevelRate3 }}%
        </div>
        <div class="text">
          好评率
        </div>
      </div>
      <div class="right">
        <div class="r-item">
          <div class="text">
            好评（{{ EvaluationRate.starLevelRate3 }}%）
          </div>
          <div class="numShow">
            <div
              class="cover"
              :style="{ width: EvaluationRate.starLevelRate3 + '%' }"
            />
          </div>
        </div>
        <div class="r-item">
          <div class="text">
            中评（{{ EvaluationRate.starLevelRate2 }}）
          </div>
          <div class="numShow">
            <div
              class="cover"
              :style="{ width: EvaluationRate.starLevelRate2 + '%' }"
            />
          </div>
        </div>
        <div class="r-item">
          <div class="text">
            差评（{{ EvaluationRate.starLevelRate1 }}）
          </div>
          <div class="numShow">
            <div
              class="cover"
              :style="{ width: EvaluationRate.starLevelRate1 + '%' }"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="sort">
      <div class="item">
        排序：
      </div>
      <div class="item active">
        默认
      </div>
      <div class="item">
        评价时间
      </div>
    </div>
    <div class="list">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-item"
      >
        <div class="user-info">
          <img
            :src="item.cPortrait"
            alt=""
            class="headImg"
          >
          <div class="name">
            {{ item.cMemberName }}
          </div>
          <!-- <div class="level">钻石</div> -->
        </div>
        <div class="goods-info">
          <div class="score">
            <img
              v-for="i in item.iStars"
              :key="i"
              src="../../assets/img/star_on.png"
              alt=""
            >
          </div>
          <div class="name">
            {{ item.cProductName }}
          </div>
          <div class="content">
            {{ item.cComment }}
          </div>
          <div class="img-box">
			  <img v-for="i in item.commentPics.split(';')" :src="i" >
		  </div>
          <div class="time">
            {{ item.dTime }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      detail: {},
      EvaluationRate: { allCount: 0 },
      page: 1,
      list: [],
    };
  },
  methods: {
    getList(item) {
      this.EvaluationRate = {};
      this.list = [];
      this.detail = item;
      let params = {
        token: localStorage.getItem("token"),
        data: {
          productID: item.id,
        },
      };
      this.$api.good.getProductEvaluate(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          if (res.data) {
            this.EvaluationRate = res.data;
            this.$emit("setcommentsNum", res.data.allCount);
          } else {
            this.$emit("setcommentsNum", 0);
          }
        }
      });
      let listData = {
        token: localStorage.getItem("token"),
        data: {
          type: 2,
          productID: item.id,
          commentStatus: 0,
          pageIndex: this.page,
          pageSize: 15,
          isFront: true,
          starLevel: null,
        },
      };
      this.$api.good.query(listData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.list = res.data.models;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.comment {
  display: flex;
  flex-direction: column;
  padding: 4rem 2rem;
  width: 100%;

  .rate {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 8.4rem;
    border-bottom: 0.13rem dashed #f0f0f0;
    padding: 1.7rem 0;

    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 2.44rem;

      .goodRate {
        font-size: 1.5rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ff2f57;
      }

      .text {
        font-size: 0.88rem;
        color: #999999;
        margin-top: 1rem;
      }
    }

    .right {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;

      .r-item {
        display: flex;
        align-items: center;

        .text {
          width: 6rem;
          font-size: 0.88rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
          margin-right: 2.5rem;
        }

        .numShow {
          width: 17rem;
          height: 1.06rem;
          background: #f0f0f0;

          .cover {
            background: #f0406f;
            width: 50%;
            height: 100%;
          }
        }
      }
    }
  }

  .sort {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 5rem;
    // padding: 1rem 0;
    border-bottom: 0.13rem dashed #f0f0f0;

    .item {
      font-size: 0.88rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #999999;
      margin-right: 4.8rem;

      &.active {
        color: #bd9759;
      }
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .list-item {
      padding: 2.06rem 2.25rem;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      border-bottom: 0.13rem dashed #f0f0f0;
      .user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 4.19rem;
        .headImg {
          width: 4.8rem;
          height: 4.8rem;
          border-radius: 50%;
        }
        .name {
          font-size: 0.88rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          margin-top: 0.5rem;
        }
        .level {
          width: 2.13rem;
          height: 1.06rem;
          background: #ff2f57;
          border-radius: 0.5rem;
          font-size: 0.88rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 0.75rem;
        }
      }
      .goods-info {
        padding-top: 1.44rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        .score {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 1.25rem;
            height: 1.19rem;
          }
        }
        .name {
          font-size: 1.13rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          margin-top: 1.13rem;
        }
        .content {
          font-size: 0.88rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          line-height: 1.75rem;
          margin-top: 1.19rem;
        }
		.img-box{
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			img{
				width: 12rem;
				height: 10rem;
				object-fit: contain;
			}
		}
        .time {
          margin-top: 2.5rem;
          font-size: 0.88rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>
